<template>
  <div class="movie-detail-filter-container">
    <div class="date-tab">
      <nut-tabs
        :title-gutter="10"
        v-model="tabTimesIndex"
        type="smile"
        title-scroll
      >
        <nut-tab-pane
          v-for="(item, index) in data"
          :pane-key="index"
          :title="item.title"
        >
        </nut-tab-pane>
      </nut-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, toRefs, watch } from "vue";
const tabbarStore = useTabbarStore();
const { selected, orderSelected, orderTabsIndex } = storeToRefs(tabbarStore);
import { useTabbarStore } from "../../store";
import { storeToRefs } from "pinia";

const tabTimesIndex = orderTabsIndex;
const props = defineProps({
  //子组件接收父组件传递过来的值
  data: Array,
});
//使用父组件传递过来的值
const { data } = toRefs(props);
onMounted(() => {
  //   getTimes()
});
const emit = defineEmits(["onChanged"]);
watch(tabTimesIndex, (index) => {
  emit("onChanged", data.value[index]);
});
watch(data, () => {
  emit("onChanged", data.value[0]);
});
</script>
<style lang="scss">
.movie-detail-filter-container {
  display: flex;
  flex-direction: column;
  .nut-tabs {
    .nut-tabs__titles {
      background: #ffffff !important;
      .nut-tabs__titles-item {
        .nut-tabs__titles-item__smile {
          display: none;
        }
        .nut-tabs__titles-item__text {
          color: #858a99 !important;
        }
      }
      .nut-tabs__titles-item.active {
        .nut-tabs__titles-item__smile {
          display: block;
          margin-top: 10px;
        }
        .nut-tabs__titles-item__text {
          color: #15181d;
        }
      }
    }
    .nut-tabs__content {
      display: none !important;
    }
  }
}
</style>
